<template>
  <q-table
      :card-container-style="{ 'overflow': 'auto' }"
      card-container-class="q-pa-sm content-start"
      class="no-border-radius full-height"
      grid
      :rows="orders"
      row-key="id"
      :filter="filter"
      :pagination="{ rowsPerPage:16 }"
      hide-header
  >
    <template v-slot:top>
      <order-detail-dialog ref="orderDetailDialog" @refresh="getOrders"/>
      <div class="flex q-gutter-x-sm items-center full-width">
        <div class="text-h6">已完成任务</div>
        <q-space/>
        <template v-if="$q.screen.gt.sm">
          <time-date-picker outlined dense v-model="startTime"
                            label="开始时间"/>
          <time-date-picker outlined dense v-model="endTime" label="结束时间"/>
          <q-input outlined dense debounce="300" v-model="filter"
                   placeholder="搜索">
            <template v-slot:append>
              <q-icon name="search"/>
            </template>
          </q-input>
        </template>
        <q-btn v-else color="secondary" icon="event" label="筛选条件">
          <q-menu persistent>
            <div class="q-pa-md">
              <time-date-picker borderless v-model="startTime"
                                label="开始时间"/>
              <q-separator vertical inset="true"/>
              <time-date-picker borderless v-model="endTime" label="结束时间"/>
              <q-separator vertical inset="true"/>
              <q-input borderless dense debounce="300" v-model="filter"
                       placeholder="搜索">
                <template v-slot:append>
                  <q-icon name="search"/>
                </template>
              </q-input>
            </div>
          </q-menu>
        </q-btn>
      </div>
    </template>
    <template v-slot:item="props">
      <div class="q-pa-sm col-xs-6 col-sm-4 col-md-3">
        <q-card @click="orderDetailDialog.show(props.row)">
          <q-card-section class="text-h6 text-bold">{{
              props.row.device
            }}
          </q-card-section>
          <q-separator/>
          <q-item dense v-for="item in columns" v-bind:key="item.key" clickable
                  v-ripple>
            <q-item-section side>{{ item.title }}</q-item-section>
            <q-item-section class="text-right">{{
                props.row[item.key]
              }}
            </q-item-section>
          </q-item>
          <q-item dense clickable v-ripple>
            <q-item-section side>任务ID</q-item-section>
            <q-item-section class="text-right">{{
                props.row.id
              }}
            </q-item-section>
          </q-item>
        </q-card>
      </div>
    </template>
<!--    <template v-slot:no-data>-->
<!--      <div-->
<!--          class="full-width row flex-center q-gutter-sm q-pb-xl text-h4 text-grey-7 content-center"-->
<!--          style="height: calc(100vh - 11rem)">-->
<!--        <q-icon size="10rem" name="sentiment_dissatisfied"/>-->
<!--        <div class="text-center full-width">-->
<!--          当前范围内没有可以显示的已完成任务-->
<!--        </div>-->
<!--      </div>-->
<!--    </template>-->
  </q-table>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { api } from 'boot/axios.js'
import OrderDetailDialog from 'components/transport/orders/OrderDialog.vue'
import TimeDatePicker from 'components/common/TimeDatePicker.vue'
import { useAPIStore } from 'stores/api/index.js'

const columns = [
  {
    title: '创建时间',
    key: 'createTime'
  },
  {
    title: '开始时间',
    key: 'startTime'
  },
  {
    title: '结束时间',
    key: 'endTime'
  }
]

export default {
  name: 'ResultPanel',
  components: {
    TimeDatePicker,
    OrderDetailDialog
  },
  setup () {
    const orders = ref([])

    const startTime = ref('')
    const endTime = ref('')
    const setDate = function () {
      const date = new Date()
      const year = date.getFullYear() // 年

      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      let hour = date.getHours() // 时
      let minute = date.getMinutes() // 分
      hour = hour < 10 ? '0' + hour : hour
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      minute = minute < 10 ? '0' + minute : minute

      startTime.value = year + '-' + month + '-01 00:00'
      endTime.value = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
    }

    async function getOrders () {
      const params = {
        startTime: startTime.value,
        endTime: endTime.value,
        status: '已完成'
      }
      api.get(useAPIStore().orderUrl + 'task', { params }).then(rs => {
        orders.value = rs.data
      })
    }

    onMounted(setDate)
    watch(startTime, value => {
      if (value !== '' && endTime.value !== '') getOrders()
    })
    watch(endTime, value => {
      if (value !== '' && startTime.value !== '') getOrders()
    })
    return {
      filter: ref(''),
      columns,
      orders,
      orderDetailDialog: ref(),
      startTime,
      endTime,
      getOrders
    }
  }
}
</script>
